<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition>
	<p:panel>
		<h:panelGrid columns="2">
			<h:outputText value="Faq Type"></h:outputText>
			<p:selectOneMenu value="#{faqModel.current.type}">
				<f:selectItems value="#{faqModel.availableTypes}" var="type"
					itemValue="#{type}" itemLabel="#{type.label}"></f:selectItems>
			</p:selectOneMenu>
			<h:outputText value="Choose a picture"></h:outputText>
			<h:panelGrid columns="3">
				<p:graphicImage id="pictureIcon"
					value="../#{faqModel.current.picture.fullFileName}" style="width:128px;height:96px"/>
				<p:overlayPanel id="imgPanel" for="pictureIcon" showEffect="blind"
					hideEffect="explode" showEvent="mouseover" hideEvent="mouseout">
					<p:graphicImage id="pictureImg"
						value="../#{faqModel.current.picture.fullFileName}" width="640" />
				</p:overlayPanel>
				<p:commandButton actionListener="#{pictureController.init}"
					ajax="true" update=":dialogForm,:headerForm" value="Choose"
					oncomplete="pictureDlg.show()"></p:commandButton>
			</h:panelGrid>
		</h:panelGrid>
		<p:tabView>
			<p:tab title="English">
				<h:panelGrid columns="2" style="width:100%">
					<h:outputText value="Question" />
					<p:inputText value="#{faqModel.current.question}"
						style="width:100%" />
					<h:outputText value="Answer" />
					<p:inputTextarea value="#{faqModel.current.answer}" style="width:100%;height:150px"/>
				</h:panelGrid>
			</p:tab>
			<p:tab title="Chinese">
				<h:panelGrid columns="2" style="width:100%">
					<h:outputText value="Question" />
					<p:inputText value="#{faqModel.current.chineseQuestion}"
						style="width:100%" />
					<h:outputText value="Answer" />
					<p:inputTextarea value="#{faqModel.current.chineseAnswer}" style="width:100%;height:150px"/>
				</h:panelGrid>
			</p:tab>
			<p:tab title="French">
				<h:panelGrid columns="2" style="width:100%">
					<h:outputText value="Question" />
					<p:inputText value="#{faqModel.current.frenchQuestion}"
						style="width:100%" />
					<h:outputText value="Answer" />
					<p:inputTextarea value="#{faqModel.current.frenchAnswer}" style="width:100%;height:150px"/>
				</h:panelGrid>
			</p:tab>
		</p:tabView>
	</p:panel>
</ui:composition>
</html>